<template>
	<view class="content">
		<view v-if="cartGoodsList.length>0">
			<strong><!-- 购物车列表 -->
				<view class="goods_box">
					<view class="goods_list" v-for="g in cartGoodsList" :key="g.id" @longpress="onLongPress(g)">
						<!-- 是否选中该商品 -->
						<!-- <checkbox class="checkbox-round" color="#55aa7f" :checked="g.checked"></checkbox> -->

						<radio-group @click="checkFGoods(g)">
							<label class="radio">
								<radio :value="g.value" color="#FA541C" :checked="g.checked" />
							</label>
						</radio-group>
						<!--商品信息-->
						<view class="info">
							<image :src="g.imgUrl"></image>
							<view class="desc">
								<view class="goods-table-box">
									<!-- <text class="goods-table">酒席</text> -->
									<view class="goods-name">{{g.productName}}</view>
								</view>

								<view class="goods-text">
									<view class="goods_score_text">评分：4.7</view>
									<view class="sales_count">月售：99</view>
								</view>

								<view class="pn">
									<view class="price">¥{{g.productPrice}}</view>
									<view class="number">
										<uni-number-box :min="minValue" :value="g.quantity"
											@change="updGoodsCard($event,g)"></uni-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 购物车样式 -->
				<my-settle ref="createModel" @ok="getCartGoodsList"></my-settle>
			</strong>
		</view>
		<!-- 购物车商品为空-->
		<view v-else class="cart_null">
			<image src="../../static/icon_r/tab-cart.png"></image>
			<view class="massage">购物车居然是空的</view>
		</view>

	</view>
</template>

<script>
	import mySettle from '@/components/my-settle/my-settle.vue'
	import {
		mapState,
		mapActions
	} from "vuex"
	// import my-settle from './components/my-settle.vue'
	export default {
		comments: {
			mySettle
		},
		data() {
			return {
				isChecked: true,
				minValue: 1
			}
		},
		methods: {
			...mapActions(['getCartGoodsList', 'queryCartGoods']),
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				// console.log("ww")
				this.$refs.popup.open('bottom')
			},
			//弹出删除操作
			onLongPress(item) {
				uni.showActionSheet({
					itemList: ['删除'],
					success: (res) => {
						if (res.tapIndex === 0) {
							// 点击删除后执行的操作    
							this.deleteCustomerCart({
								id: item.id
							})
						}
					}
				})
				// console.log(item)	
			},
			//删除购物车
			async deleteCustomerCart(id) {
				const {
					status,
					data,
					msg
				} = await this.$api.cart.deleteCustomerCart(id)
				if (status == 200) {
					this.getCartGoodsList()
					this.queryCartGoods()
					uni.$u.toast("操作成功")
				} else {
					uni.$u.toast("操作失败")
				}
			},
			//购物车价格
			updGoodsCard(number, info) {
				// console.log(e)
				let price = info.productPrice * number
				info.price = price.toFixed(2);
				info.quantity = number
				this.updateCartPrice(info)

			},
			//更新购物车价格
			async updateCartPrice(params) {
				try {
					const {
						status,
						data,
						msg
					} = await this.$api.cart.updateCartPrice(params)
					if (status == 200) {
						this.queryCartGoods()
					}
				} catch (e) {
					console.log(e)
				}
			},
			//点击选种购物车商品信息
			checkFGoods(info) {
				info.checked = !info.checked
				info.type = "NO"
				info.cartStatus = info.checked ? 1 : 0;
				this.updateCartStatus(info)
			},
			//调用接口修改购物车状态
			async updateCartStatus(params) {
				const {
					status,
					data,
					msg
				} = await this.$api.cart.updateCartStatus(params)
				if (status == 200) {
					this.queryCartGoods()
					// this.queryCartProductInfo()
				}
			},
			//关闭金额弹出框
			closePopup() {
				this.$refs.popup.close()
			}
		},
		computed: {
			...mapState(['cartGoodsList', 'cartGoods', 'isAuth']),
		},
		onLoad() {
			this.getCartGoodsList()
			this.queryCartGoods()
			// this.queryCartProductInfo()
		}
	}
</script>

<style scoped lang="less">
	// 购物车商品列表区域
	.goods_box {
		width: 100%;
		height: 90%;
		position: fixed;
		overflow-y: auto;
		/* 当内容超出高度时显示垂直滚动条 */
		// bottom: 0upx;

		// 商品列表
		.goods_list {
			display: flex;
			align-items: center;
			height: 200upx;
			margin: 10upx;
			background-color: #fff;

			//商品信息
			.info {
				flex: 1;
				display: flex;
				padding: 10upx;

				image {
					width: 180upx;
					height: 180upx;
				}

				.desc {
					flex: 1;
					padding-left: 20upx;
					position: relative;
					font-weight: normal;

					//商品名称
					.goods-table-box {
						font-size: 25upx;
						width: 100%;
						margin-top: 10upx;
						max-height: 140upx;
						float: left;

						.goods-table {
							width: 12%;
							height: 30upx;
							float: left;
							font-size: 25upx;
							background-color: red;

							line-height: 30upx;
							text-align: center;
							color: white;
							border-radius: 20%;
						}

						.goods-name {
							width: 65%;
							height: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							float: left;
							line-height: 30upx;
							margin-left: 10upx;
						}
					}

					.goods-text {
						font-size: 22upx;
						width: 100%;
						margin-top: 10upx;
						max-height: 140upx;
						float: left;

						//菜品评分
						.goods_score_text {
							width: 100%;
							height: 30upx;
							line-height: 30upx;
							color: red;
							margin-top: 10upx;
						}

						//月销
						.sales_count {
							width: 100%;
							height: 30upx;
							line-height: 30upx;
							margin-top: 10upx;
						}
					}

					.pn {
						position: absolute;
						display: flex;
						bottom: 5upx;

						//商品价格
						.price {
							color: #ff557f;
							padding-right: 50upx;
						}

						//数量
						.number {
							float: right;
							padding-right: 100upx;

						}
					}

				}
			}
		}

	}

	//购物车商品为空
	.cart_null {
		width: 50%;
		line-height: 50%;
		margin: auto;
		margin-top: 30%;
		font-size: 40upx;
		color: #818181;

		.massage {
			margin-top: 30upx;
			width: 350upx;
			height: 30upx;
			line-height: 30upx;
		}

		image {
			margin-left: 50upx;
			width: 220upx;
			height: 220upx;
		}

	}
</style>